<template>
  <div class="swper-content">
    <div class="swper-container">
      <div class="swper-container-title">
        <div class="swper-container-text">新游预约</div>
      </div>
      <div class="swper-div">
        <a href="#">更多</a>
        <span class="iconfont icon-changyongicon-"></span>
      </div>
    </div>
    <div class="spec-preview">
      <div v-for="(imgs, index) in dataImgUrl" :key="imgs.id">
        <img :src="imgs.imgUrl" v-if="defaultIndex === index" />
      </div>
      <div class="spec-preview-item">
        <div
          class="spec-preview-item-title"
          v-for="(img, index) in imgs"
          :key="img.id"
          :class="{ active: defaultIndex === index }"
          @mouseenter="changeIndex(index)"
        >
          <div class="big">
            <img :src="img.imgUrl" class="spec-preview-item-img" />
          </div>
          <div class="game-info">
            <div class="game-title">全明星街球派对</div>
            <span class="game-text">体育竞技</span>
          </div>
        </div>
      </div>
      <!-- <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "SwperTwo",
  data() {
    return {
      defaultIndex: 0,
      imgs: [
        {
          id: "1",
          imgUrl: "../image/lunxiao01.webp",
        },
        {
          id: "2",
          imgUrl: "../image/lunxiao02.webp",
        },
        {
          id: "3",
          imgUrl: "../image/lunxiao003.webp",
        },
        {
          id: "4",
          imgUrl: "../image/lunbo004.png",
        },
        {
          id: "5",
          imgUrl: "../image/lunbo004.png",
        },
      ],
      dataImgUrl: [
        {
          id: "1",
          imgUrl: "../image/lunbo004.png",
        },
        {
          id: "2",
          imgUrl: "../image/lunbo001.png",
        },
        {
          id: "3",
          imgUrl: "../image/lunbo003.png",
        },
        {
          id: "4",
          imgUrl: "../image/lunbo001.png",
        },
        {
          id: "5",
          imgUrl: "../image/lunbo002.png",
        },
      ],
    };
  },
  methods: {
    changeIndex(index) {
      this.defaultIndex = index;
    },
  },
};
</script>

<style lang="less" scoped>
.swper-content {
  width: 1160px;
  margin: 0 auto;
  margin-top: 40px;
}
.swper-container {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.swper-container-title {
  width: 100%;
  display: flex;
  align-items: center;
  height: 24px;
}
.swper-container-text {
  font-size: 24px;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: 1px;
  line-height: 32px;
}
.spec-preview-item {
  margin-top: 20px;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.spec-preview-item-title {
  position: relative;
  display: flex;
  position: relative;
  opacity: 1;
  width: 180px;
  justify-content: space-between;
  border-radius: 10px;
  padding: 10px 11px;
  opacity: 0.5;
}
.swper-div {
  height: 28px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  white-space: nowrap;
  padding: 0 0 0 10px;
  box-sizing: border-box;
  border: 1px solid #dadee6;
}
.game-info {
  margin-left: 10px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}
.game-title {
  width: 126px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spec-preview-item-img {
  width: 58px;
  height: 60px;
  border-radius: 5px;
}
.game-text {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.35);
}

&.active {
  border: 2px solid #24b8f2;
  opacity: 1;
}
.swiper-button-next,
.swiper-button-prev {
  box-sizing: border-box;
  width: 12px;
  height: 56px;
  background: rgb(235, 235, 235);
  border: 1px solid rgb(204, 204, 204);
  top: 0;
  margin-top: 0;
  &::after {
    font-size: 12px;
  }
}
</style>
